import { ComponentOptionsMixin, ComponentPublicInstance, DefineComponent, ExtractPropTypes, PublicProps, createApp } from "vue"
const dialogs: {
    [key: string]: ComponentPublicInstance | undefined
} = {}
import AfastConfirmDialog from "@/components/b/AfastConfirmDialog.vue";

export function registerDialog(key: string, construct: DefineComponent<any, any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, string, PublicProps, Readonly<ExtractPropTypes<{}>>, any, any>): DialogHandler {
    const mountNode = document.createElement('div')
    mountNode.setAttribute('id', `dialog-${key}`)
    mountNode.setAttribute('class', 'afast-dialog-container')
    const app = document.getElementById("app")
    if (!app) {
        throw new Error('App is not find')
    }
    app.appendChild(mountNode);
    const dialog = createApp(construct, {
        visible: true,
        remove() {
            dialog.unmount();
            document.body.removeChild(mountNode)
        }
    })
    const dialogInstance = dialog.mount(mountNode)
    //@ts-ignore
    if (!dialogInstance.show || typeof dialogInstance.show !== 'function') {
        //缺少show方法
        throw new Error('The dialog is missing function named `show`')
    }
    //@ts-ignore
    if (!dialogInstance.close || typeof dialogInstance.close !== 'function') {
        //缺少close方法
        throw new Error('The dialog is missing function named `close`');
    }
    dialogs[key] = dialogInstance
    return {
        //@ts-ignore
        show: dialogInstance.show,
        //@ts-ignore
        close: dialogInstance.close,
    }
}
export function getDialog(key: string): DialogHandler {
    const app = dialogs[key]
    return {
        //@ts-ignore
        show: app.show,
        //@ts-ignore
        close: app.close,
    }
}

export function removeDialog(key: string) {
    if (dialogs[key]) {
        dialogs[key] = undefined
    }
    const ele = document.getElementById(`dialog-${key}`)
    if (ele) {
        ele.remove()
    }
}

function lockScroll() {
    let widthBar = 17, root = document.documentElement;
    if (typeof window.innerWidth == 'number') {
        widthBar = window.innerWidth - root.clientWidth;
    }
    root.style.overflow = 'hidden';
    root.style.borderRight = widthBar + 'px solid transparent';
}
function unlockScroll() {
    let root = document.documentElement;
    root.style.overflow = '';
    root.style.borderRight = '';
}
export function confirm(setting: {
    title?: string;
    message?: string;
    showConfirm?: boolean;
    showCancel?: boolean;
    confirmText?: string;
    cancelText?: string;
    confirmTextColor?: Color;
    cancelTextColor?: Color;
    closeOnClickModal?: boolean;
    buttonSize?: ButtonSize;
    showClose?: boolean
    success?: () => void,
    fail?: () => void,
    complete?: () => void
}
) {
    const key = `confirm-${new Date().getTime()}`
    const dialog = registerDialog(key, AfastConfirmDialog)
    if (dialog) {
        return dialog.show(
            setting,
            {
                onShow(){
                    lockScroll()
                },
                onClose(isSuccess: boolean) {
                    removeDialog(key)
                    unlockScroll()
                    if (isSuccess) {
                        if (setting.success) setting.success()
                    } else {
                        if (setting.fail) setting.fail()
                    }
                    if (setting.complete) setting.complete()
                }
            }
        )

    }
}